
<html lang="zh-cn">
    
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk">
<style type="text/css">
table
{
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:80%;
  border-collapse:collapse;
}
table td, table th 
{
  font-size:1em;
  border:1px solid #848284;
  padding:7px 7px 7px 20px;

}

table th 
{
  font-size:1.1em;
  text-align:center;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#4d8cd8;
  color:#ffffff;
}

h4
{
  font-size:1.1em;
}

</style>
</head>

<body>
<h1 align="center">Data from MySQL!</h1>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="height:700px"></div>
    <!-- ECharts单文件引入 -->
  <script type="text/javascript" src='/js/echarts-all.js'></script>

  <script type="text/javascript">
  
    //var d =  {{coats}}
        // 路径配置

        //var d = [20,20,50,20,20]
        var myChart = echarts.init(document.getElementById('main')); 
                
        var option = {
            title: {
              x: 'center',
              text: 'ECharts例子个数统计',
              subtext: 'Rainbow bar example',
              link: 'http://echarts.baidu.com/doc/example.html'
             },
             tooltip: {
                 trigger: 'item'
              },
             toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
                  }
                },
             calculable: true,
             grid: {
              borderWidth: 0,
              y: 80,
              y2: 60
            },
            xAxis: [
              {
                type: 'category',
                //show: false,
                data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel']
              }
            ],
            yAxis: [
              {
                type: 'value',
                //show: false
              }
            ],
              series: [
                  {
                      name: 'ECharts例子个数统计',
                      type: 'bar',
                      itemStyle: {
                          normal: {
                              color: function(params) {
                                  // build a color map as your need.
                                  var colorList = [
                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                     '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                     '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                  ];
                                  return colorList[params.dataIndex]
                              },
                              label: {
                                  show: true,
                                  position: 'top',
                                  formatter: '{b}\n{c}'
                              }
                          }
                      },
                      //data: [12,21,10,4,12,5,6,5,25,23,7],
                      data: {{d}},
                      markPoint: {
                          tooltip: {
                              trigger: 'item',
                              backgroundColor: 'rgba(0,0,0,0)',
                              formatter: function(params){
                                  return '<img src="' 
                                          + params.data.symbol
                                          + '"/>';
                              }
                          },
                          data: [
                              {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: '/js/image/a.png'},
                              {xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: '/js/image/b.png'},
                              {xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: '/js/image/c.png'},
                              {xAxis:3, y: 350, name:'K', symbolSize:20, symbol: '/js/image/x.png'},
                              {xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: '/js/image/y.png'},
                              {xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: '/js/image/z.png'},
                              {xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: '/js/image/d.png'},
                              {xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: '/js/image/e.png'},
                              {xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: '/js/image/i.png'},
                              {xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: '/js/image/t.png'},
                              {xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: '/js/image/u.png'},
                          ]
                      }
                  }
              ]
};
                    
                // 为echarts对象加载数据 
        myChart.setOption(option); 
   
  </script>

<h1 align=center>每日运维数据</h1>
<div style="margin-left:100px;">
<table>


<tr height="40">
    <th align=center><b>datetime</b></th>
    <th align=center><b>type</b></th>
    <th align=center><b>money-type</b></th>
	<th align=center><b>category</b></th>
	<th align=center><b>amount</b></th>
</tr>


{% for item in item_lists %}
	<tr>
	   <td align=center><b>{{item.date}}</b></td>
		<td align=center><b>{{item.type}}</b></td>
		<td align=center><b>{{item.money_type}}</b></td>		
		<td align=center><b>{{item.category}}</b></td>		
		<td align=center><b>{{item.amount}}</b></td>		
	</tr>
{% endfor %}

</table>
</div>



</body>
</html>